<template>
  <div>
    <div class="center">
      <el-row :gutter="20">
        <el-col :span="3"><div class="centerTitle">自建测评组合</div></el-col>
        <el-col :span="2" :offset="18" :xl="{span: 2, offset: 19}">
          <el-button v-if="this.menuList.includes('surveyCombinedStore')" type="primary" size="medium" @click="addPlanFn">新增测评组合</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="platformTable">
        <home-tab :tableData= "tableData" :tableConfig="tableConfig" :slotRow="true" @operation="goToOperation"/>
      </el-row>
      <el-row :gutter="24" class="fr">
        <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="this.limit" layout="total, prev, pager, next" :total="total"> </el-pagination>
      </el-row>
    </div>
  </div>
</template>
<script>
import homeTab from '@/components/table.vue'
import {APISURVEYLIST, APIPRETESTPLAN, APIDELESTORE} from '@/common/api.js'
export default {
  components: {
    homeTab
  },
  data () {
    return {
      menuList: [],
      configRow: ['input', '', '', ''], // 配置的就是input、select 没有就是空
      configRowList: {
        student_title: '',
        count: '',
        topics_num: ''
      },
      tableData: [],
      tableConfig: {
        loading: false,
        class: 'table-list', // 表格的class名
        style: 'width:100%',
        checkout: false, // 控制是否有多选框
        config: [
          {
            label: '名称',
            prop: 'student_title',
            align: 'center',
            modelValue: ''
          },
          {
            label: '测评量表数量',
            prop: 'count',
            align: 'center',
            modelValue: ''
          },
          {
            label: '题量',
            prop: 'topics_num',
            align: 'center',
            modelValue: ''
          },
          {
            prop: 'operation',
            label: '操作',
            list: []
          }
        ]
      },
      currentPage: 1,
      total: 0,
      page: 1,
      limit: 10
    }
  },
  created () {
    this.menuList = sessionStorage.getItem('list')
    if (this.menuList.includes('surveyUpdateDetail')) {
      var operation1 = {id: 'edit', name: '编辑'}
      this.tableConfig.config.forEach(item => {
        if (item.prop === 'operation') {
          item.list.push(operation1)
        }
      })
    }
    if (this.menuList.includes('surveyTestDispatch')) {
      var operation2 = {id: 'test', name: '试测'}
      this.tableConfig.config.forEach(item => {
        if (item.prop === 'operation') {
          item.list.push(operation2)
        }
      })
    }
    if (this.menuList.includes('surveyCopyDispatch')) {
      var operation3 = {id: 'copy', name: '复制'}
      this.tableConfig.config.forEach(item => {
        if (item.prop === 'operation') {
          item.list.push(operation3)
        }
      })
    }
    if (this.menuList.includes('surveyDestroy')) {
      var operation4 = {id: 'delect', name: '删除', className: 'dangerTextBtn'}
      this.tableConfig.config.forEach(item => {
        if (item.prop === 'operation') {
          item.list.push(operation4)
        }
      })
    }
    this.tableList()
  },
  methods: {
    tableList () {
      APISURVEYLIST({
        type: 1,
        title: this.tableConfig.config[0].modelValue,
        page: this.page,
        limit: this.limit
      }).then((res) => {
        if (res.status === 1) {
          this.InIt()
          this.total = res.data.totalNumber
          this.currentPage = res.data.page
          res.data.list.forEach(item => {
            this.tableData.push(item)
          })
        } else {
          this.$message.error(res.msg)
          this.tableData = []
          this.tableData.push(this.seacherTab)
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    InIt () { // 初始化
      this.tableData = []
      const arrs = Object.keys(this.configRowList)
      const obj = {}
      arrs.map((item, index) => {
        obj[item] = this.configRow[index]
      })
      this.tableData.unshift(obj)
    },
    addPlanFn () {
      this.$router.push({path: '/addSelfList'})
    },
    editPlanFn (row) {
      this.$router.push({path: '/editSelfList', query: {row: row}})
    },
    copyPlanFn (row) {
      this.$router.push({path: '/copySelfList', query: {row: row}})
    },
    goToOperation (e) {
      if (e.id === 'query') { // 搜素
        this.tableList()
      } else if (e.id === 'del') { // 清除
        this.tableConfig.config.forEach(element => {
          element.modelValue = ''
        })
        this.tableList()
      } else if (e.id === 'delect') {
        this.delectFn(e.rows)
      } else if (e.id === 'test') {
        this.testFn(e.rows)
      } else if (e.id === 'edit') {
        this.editPlanFn(e.rows)
      } else if (e.id === 'copy') {
        this.copyPlanFn(e.rows)
      }
    },
    testFn (row) {
      APIPRETESTPLAN({
        plan_type: 2,
        public_ids: row.id
      }).then((res) => {
        if (res.status === 1) {
          window.open(res.data.url, '_blank')
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    handleCurrentChange (val) { // 分页
      this.page = val
      this.tableList()
    },
    goToDeleteSelect (val) { // 多选
      let arr = []
      val.forEach(item => {
        arr.push(item.uid)
      })
      this.checkStr = arr.toString()
    },
    delectFn (row) {
      APIDELESTORE({
        id: row.id
      }).then((res) => {
        if (res.status === 1) {
          if (res.status === 1) {
            this.$message.success(res.msg)
            this.tableList()
          } else {
            this.$message.error(res.msg)
          }
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.platformTable{
  margin-top: 2vh;
}
</style>
